{% extends 'public/body.html' %}


{% block main %}
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <!-- 上传表单-->
            <div class="upload">
                <h1>用户注册②<em>填写基本信息、完成用户注册第二步</em></h1>
                <!-- 注册步骤导航-->
                <div class="reg_step">
                    <a class="step1">注册信息</a><a class="step">基本信息</a><a class="step2">注册完成</a>
                </div>

                <form id="myform" autocomplete="off">

                    <p class="file">
                        <input type="file" name="resource" @change="uploadAvatar"/>
                        <span class="t1" v-if="!isUpload">点击上传用户头像、图片小于5MB</span>
                        <!-- 上传后的效果 -->

                        <span class="t2" v-else>
                            <img :src="file.dataUrl"/>
                            <b>#{file.name}</b>
                            <a>重新上传</a>
                        </span>

                    </p>

                    <p>
                        <label>出生日期：</label>
                        <input id="tel" class="upt" type="date" name="birth" v-model="birthday"/>
                    </p>

                    <p>
                        <label>昵称：</label>
                        <input id="nickname" class="upt" type="text" name="nickname" v-model.trim="nickname"/>
                        <b></b>
                    </p>

                    <p>
                        <label>真实姓名：</label>
                        <input id="realname" class="upt" type="text" name="realname" v-model.trim="name"/>
                        <b></b>
                    </p>

                    <p>
                        <label>性别：</label>
                        <select name="sex" class="upt" v-model="sex">
                            <option value="S">保密</option>
                            <option value="M">男</option>
                            <option value="F">女</option>
                        </select>
                    </p>

                    <p>
                        <a class="btn" @click="complete">确认完成</a>
                        <a class="skip" href="{% url 'success' %}">跳过该步骤</a>
                    </p>
                </form>
            </div>
        </section>
    </div>



{% endblock %}


{% block vue %}
    <script>
        Vue.createApp({
            data() {
                return {
                    file: {
                        avatar: null, //用户头像
                        name: '', //文件名字
                        size: 0,//文件大小
                        dataUrl: '' //文件的 dataUrl
                    },
                    uploaded: false,//标记图片是否上传成功
                    birthday: '',
                    nickname: '',
                    name: '',
                    sex: 'S'
                }
            },
            methods: {
                uploadAvatar(event) {

                    //获取上传的文件对象 （File)
                    const file = event.target.files[0];
                    this.file.avatar = file;
                    this.file.name = file.name;
                    this.file.size = file.size;

                    //生成 文件的 dataUrl
                    const reader = new FileReader();
                    //把文件转为 base64 data URL，用于在页面上做图片预览
                    reader.readAsDataURL(file)
                    reader.onload = (e) => {
                        this.file.dataUrl = e.target.result;
                    };

                    //文件上传
                    const formData = new FormData()
                    formData.append('avatar', this.file.avatar);
                    formData.append('uid', {{ uid }})
                    this.uploaded = false

                    axios.post('{% url "upload_avatar" %}', formData).then(res => {

                        if (res.data.code === 200) {
                            this.uploaded = true
                        }

                    })

                },
                complete(event) {

                    event.preventDefault();
                    //提交表单
                    const formData = new FormData();
                    formData.append('uid', {{ uid }});
                    formData.append('birthday', this.birthday);
                    formData.append('nickname', this.nickname);
                    formData.append('name', this.name);
                    formData.append('gender', this.sex);

                    axios.post('{% url "register2" %}', formData).then(res => {

                        if (res.data.code === 200) {

                            layer.msg('注册成功', {icon: 1, time: 2000}, function () {
                                window.location.href = '/success?nickname=' + res.data.nickname
                            })

                        } else {
                            layer.msg(res.data.msg, {icon: 2})
                        }
                    })

                }


            },
            computed: {
                isUpload() {
                    return this.file.avatar !== null;
                }
            },
            delimiters: ['#{', '}']

        }).mount('#main')

    </script>
{% endblock %}

